<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/swiper.css">
</head>
<body>

    <h1>xx</h1>

    <ul>
        <li>
            <a href="./login.html">登录</a>
        </li>
        <li>
            <a href="./reg.html">注册</a>
        </li>
        <li>
            <a href="./list.html">商品列表</a>
        </li>
        <li>
            <a href="./cart.html">购物车</a>
        </li>
    </ul>


    <div class="swiper" id="a">
        <ul>
            <!-- <li>
                <img src="" alt="">
            </li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>1</li> -->
        </ul>
        <ol>
            <!-- <li class="active" num="0"></li>
            <li num="1"></li>
            <li num="2"></li>
            <li num="3"></li> -->
        </ol>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>



    <script src="../js/ajax.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/swiper.js"></script>

    <script>

        // 判断用户是否登录  cookie  LOGIN_USER

        const user = getCookie('LOGIN_USER') ;
        if(user) {
            const oH1 = document.querySelector('h1') ;
            oH1.innerHTML = user ;
        }


        // 实现轮播效果
        //    请求接口完成这个轮播

        ajax({
            url : 'http://43.138.81.225/php/banner.php' ,
            type : 'get' ,
            success : data => {
                console.log(data);
                if(data.status) {
                    const list = data.data ;
                    console.log(list);
                    // 先渲染页面
                    render(list) ;
                    // 实现轮播
                    new Swiper('#a');

                    // 
                } else {
                    alert('服务器错误，请刷新')
                }
            }
        })



        function render(list) {
            let html = list.reduce((prev , item) => {
                return prev + ` <li>
                                    <img src="${item.picSrc}" alt="">
                                </li>`
            } , '')
            html += ` <li>
                        <img src="${list[0].picSrc}" alt="">
                     </li>`
            const oBox = document.querySelector('.swiper') ;
            const oUl = oBox.querySelector('ul') ;
            const oOl = oBox.querySelector('ol');
            oUl.innerHTML = html ;


            let dotHTML = list.reduce((prev , item , i) => {
                return prev + ` <li num="${i}"></li>`
            } , '')
            oOl.innerHTML = dotHTML ;
            // 给第一个小点添加active

            const oDots = oOl.children ;
            oDots[0].classList.add('active');

        }


    </script>
    
</body>
</html>